<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>果真好-新鲜、惠民、快捷！</title>
  <!-- 选link:favicon这个！！！ -->
  <link rel="shortcut icon" href="./bitbug_favicon.ico" type="image/x-icon" />
  <meta name="description" content="果真好商城官网，致力于打造全球最大的食品、生鲜电商购物平台。" />
  <meta name="keywords" content="果真好商城,食品,生鲜,电商,购物" />
  <!-- 引入css文件 -->
  <!-- 1.引入base.css -->
  <link rel="stylesheet" href="./css/base.css" />
  <!-- 2.引入common.css -->
  <link rel="stylesheet" href="./css/common.css" />
  <!-- 3.引入user.css -->
  <link rel="stylesheet" href="./css/user.css" />
  <link rel="stylesheet" href="./css/style.css">
  <style>
    .main {
      display: flex;
      width: 1240px;
      margin: 0 auto;
    }

    .left {
      width: 232px;
      margin-right: 20px;
    }

    .right {
      flex: 1;
    }

    .user {
      /* 使用flex布局，将主轴更改为垂直方向，并居中，侧轴也居中 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 230px;
      background-color: #fff;
      border-bottom: 2px solid rgb(233, 233, 233);
    }

    .user>span {
      font-size: 20px;
    }

    .user>img {
      width: 85px;
      height: 85px;
    }

    .user>div {
      border-radius: 13px;
      /* 设置渐变色 */
      background-image: linear-gradient( 264deg, #e05e2f 0%, #ea745e 95%);
      width: 130px;
      text-align: center;
      padding: 4px 0px;
    }

    .user>div>span {
      font-size: 15px;
      color: #fff;
    }

    .user>div>img {
      margin-right: 2px;
      width: 18px;
      margin-top: -5px;
    }

    .account {
      display: flex;
      /* height: 486px; */
      flex-direction: column;
      align-items: center;
      border-bottom: 2px solid rgb(233, 233, 233);
      background-color: #fff;
      padding-bottom: 15px;
    }

    .account:nth-child(5) {
      border-bottom: 0;
    }

    .account_title {
      font-size: 19px;
      font-weight: bold;
      margin-top: 30px;
      margin-bottom: 23px;
    }

    .account>ul>li {
      margin-bottom: 23px;
      position: relative;
    }

    .account>ul>li:hover {
      color: #5eb69c;
      list-style: disc;
    }

    .right_top {
      display: flex;
      background-color: #fff;
      justify-content: space-around;
      padding: 30px 0px;
    }

    .vip,
    .coupons {
      flex: 1;
    }

    .vip {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    .vip_content {
      text-align: center;
    }

    .vip_content {
      cursor: pointer;
    }

    .vip_content>p {
      margin-top: 10px;
      font-size: 16px;
    }

    .vip_coupons>span {
      font-size: 24px;
      color: red;
    }

    .vip_coupons {
      padding-bottom: 1px;
    }

    .vip_content>img {
      width: 25px;
      height: 25px;
      margin-top: 12px;
    }

    .vip_line {
      border-left: 2px solid rgb(172, 172, 172, 0.3);
    }

    .right_middle {
      margin-top: 20px;
      background-color: #fff;
    }

    .right_middle_top {
      display: flex;
      justify-content: space-between;
      padding: 15px;
    }

    .right_middle_top>span {
      font-size: 20px;
      font-weight: 500;
    }

    .right_middle_top>a {
      font-size: 16px;
      color: rgb(133, 133, 133);
      padding-top: 3px;
    }

    .right_middle_content {
      display: flex;
      padding: 0px 15px;
    }

    .my_order_left {
      flex: 2;
      border: 1px solid rgb(224, 224, 224, 0.7);
    }

    .my_order_center_one,
    .my_order_center_two,
    .my_order_right {
      flex: 1;
    }

    .my_order_left>img {
      width: 107px;
      height: 107px;
    }

    .my_order_right,
    .my_order_center_one,
    .my_order_center_two {
      /* 使用flex布局，将主轴更改为垂直方向，并居中，侧轴也居中 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid rgb(224, 224, 224, 0.7);
      border-left: 0;
      padding: 15px 0;
    }

    .my_order_left {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-right: 0;
    }

    .my_order_left_text>p {
      /* 文字内容最多只能显示一行，超出则变为省略号 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      padding-left: 15px;
    }

    .my_order_left_text>span {
      font-size: 13px;
      color: rgb(177, 177, 177);
      padding-left: 15px;
    }

    .my_order_center_one>span:nth-child(1) {
      color: rgb(255, 112, 112);
    }

    .my_order_center_one>span:nth-child(2):hover {
      cursor: pointer;
    }

    .my_order_center_two>span:nth-child(1) {
      color: rgb(177, 2, 2);
    }

    .my_order_right>button {
      background-color: #5eb69c;
      border-radius: 5px;
      color: #fff;
      margin-bottom: 17px;
      padding: 6px 20px;
      border: 0;
    }

    .my_order_right>span:hover {
      /* 当鼠标经过时，光标变为手指模样 */
      cursor: pointer;
    }

    .right_middle_content {
      margin-bottom: 15px;
    }

    .right_middle {
      overflow: hidden;
    }

    .collection_all {
      display: flex;
      padding: 0 12px;
      margin-bottom: 15px;
    }

    .collection>img {
      width: 160px;
      height: 160px;
      margin-bottom: 7px;
    }

    .collection>img:hover {
      cursor: pointer;
    }

    .collection {
      padding: 0px 35px;
      flex: 1;
      text-align: center;
      position: relative;
    }

    .six {
      /* 将“六折”绝对定位到元素当中去 */
      position: absolute;
      top: 5px;
      left: 30px;
      width: 18px;
      height: 46px;
      color: rgb(22, 170, 46);
      border: 1px solid rgb(22, 170, 46);
      border-radius: 3px;
    }

    .collection_title>p {
      text-align: left;
    }

    .collection_title>p:nth-child(1):hover {
      cursor: pointer;
    }

    .collection_title>p:nth-child(2) {
      color: rgb(196, 0, 0);
    }

    .collection_title>p:nth-child(2)>span {
      font-size: 20px;
    }
  </style>
</head>

<body>

<!-- 个人中心的模块 main start -->
<div class="main" id="app">
  <!-- 首先将网页中间的main内容分为左右两个大块 -->
  <div class="left">
    <div class="user">
      <img src="./imgs/011.jpg" alt="">
      <span id="username">{{personalInfornation.username}}</span>
      <div>
        <img src="./uploads/vip_gold.png" alt="">
        <span>黄金会员</span>
      </div>
    </div>
    <div class="account">
      <div class="account_title">
        我的账户
      </div>
      <ul>
        <li>个人中心</li>
        <li>消息通知</li>
        <li>个人信息</li>
        <li>地址管理</li>
        <li>我的积分</li>
        <li>我的足迹</li>
      </ul>
    </div>
    <div class="account">
      <div class="account_title">
        交易管理
      </div>
      <ul>
        <li><a :href="'/orders.html?id='+personalInfornation.id">我的订单</a></li>
        <li>优惠券</li>
        <li>售后服务</li>
      </ul>
    </div>
    <div class="account">
      <div class="account_title">
        我的收藏
      </div>
      <ul>
        <li>收藏的商品</li>
        <li>收藏的店家</li>
        <li>收藏的评论</li>
      </ul>
    </div>
    <div class="account">
      <div class="account_title">
        帮助中心
      </div>
      <ul>
        <li>帮助中心</li>
        <li>在线客服</li>
      </ul>
    </div>
  </div>
  <!-- 网页main内容的右边部分 -->
  <div class="right">
    <div class="right_top">
      <div class="vip">
        <div class="vip_content">
          <img src="./images/safe.png" alt="">
          <p>会员中心</p>
        </div>
        <div class="vip_content">
          <img src="./images/vip.png" alt="">
          <p>安全设置</p>
        </div>
        <div class="vip_content">
          <img src="./images/address.png" alt="">
          <a :href="'/admin.html?id='+personalInfornation.id">地址管理</a>
        </div>
      </div>
      <div class="vip vip_line">
        <div class="vip_content vip_coupons">
          <span>6</span>
          <p>优惠券</p>
        </div>
        <div class="vip_content vip_coupons">
          <span>2</span>
          <p>礼品卡</p>
        </div>
        <div class="vip_content vip_coupons">
          <span>256</span>
          <p>积分</p>
        </div>
      </div>
    </div>
    <!-- 网页右边部分的中间内容 -->
    <div class="right_middle">
      <div class="right_middle_top">
        <span>我的订单</span>
        <a :href="'/orders.html?id='+personalInfornation.id">查看全部</a>
      </div>
      <div>
        <template>
          <el-table
                  :data="ordersArr"
                  style="width: 100%">


            <el-table-column
                               label="商品图片"
                               width="50px"
                              >
              <template slot-scope="scope">
                <el-col span="12">
                  <el-card>
                    <img :src="scope.row.url" width="100%" alt="">
                  </el-card>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column
                    label="订单ID"
                    width="100px"
                    align="center"
            >
              <template slot-scope="scope">
                <i class="el-icon-s-order"></i>
                <!--scope.row代表当前行对应数组中的对象-->
                <span style="margin-left: 45px">{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="订单数量"
                    width="80px"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-files"></i>
                <span style="margin-left: auto;text-align: center">{{ scope.row.orderNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="购买数量"
                    width="80px"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-files"></i>
                <span style="margin-left: auto">{{ scope.row.num }}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="总价"
                    width="100px"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-folder-checked"></i>
                <span style="margin-left: 45px">{{ scope.row.total}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="发货地址"
                    width="180"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-s-promotion"></i>
                <span style="margin-left: 45px">{{ scope.row.shipAddress}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="收货地址"
                    width="180"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-s-promotion"></i>
                <span style="margin-left: auto">{{ scope.row.deliveryAddress}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="支付时间"
                    width="150"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: auto">{{ scope.row.payTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
                    label="订单状态"
                    width="100"
                    align="center">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.state }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
                    label="订单创立时间"
                    width="180"
                    align="center">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: auto">{{ scope.row.sendTime}}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <div class="right_middle">
      <div class="right_middle_top">
        <span>收藏的商品</span>
        <a href="#">查看全部 ></a>
      </div>
      <div class="collection_all">
        <div class="collection">
          <img src="./uploads/clothes_goods_1.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>55</span></p>
          </div>
        </div>
        <div class="collection">
          <div class="six">6折</div>
          <img src="./uploads/clothes_goods_2.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>20.9</span></p>
          </div>
        </div>
        <div class="collection">
          <img src="./uploads/clothes_goods_3.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>209</span></p>
          </div>
        </div>
        <div class="collection">
          <img src="./uploads/clothes_goods_4.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>274.5</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="right_middle">
      <div class="right_middle_top">
        <span>我的足迹</span>
        <a href="#">查看全部 ></a>
      </div>
      <div class="collection_all">
        <div class="collection">
          <img src="./uploads/clothes_goods_5.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>99</span></p>
          </div>
        </div>
        <div class="collection">
          <div class="six">6折</div>
          <img src="./uploads/clothes_goods_6.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>171.9</span></p>
          </div>
        </div>
        <div class="collection">
          <img src="./uploads/clothes_goods_3.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>209</span></p>
          </div>
        </div>
        <div class="collection">
          <img src="./uploads/clothes_goods_4.jpg" alt="">
          <div class="collection_title">
            <p></p>
            <p> ￥<span>274.5</span></p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<!-- 个人中心的模块 main end -->


</body>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        personalInfornation:"",
        ordersArr: [],
      }
    },
    methods: {


    },
    created:function () {
      console.log(location.search);
      if (location.search.indexOf("username")!=-1){//包含wd代表显示搜索结果
        //根据地址栏中的wd搜索内容发出请求获取所有相关商品
        let username = location.search.split('=')[1];
        axios.get("/user/"+username+"/selectByUsername")
                .then(function (response) {
                  v.personalInfornation = response.data.data;
                  console.log(v.personalInfornation)

                  //发请求获取订单信息
                  axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                          .get("/orders/"+v.personalInfornation.id).then(function (response) {
                    console.log(response);
                    v.ordersArr = response.data.data;
                  })

                })
      }

    }
  })
</script>
</html>